<template>
	<Loading v-show="isLoading"></Loading>
	<div class="main">
		<div>
			<!--基本资料-->
			<div class="common">
			<div class="common-title">
				<img class="common-icon" src="@/assets/images/wechat/lawyer/riskwarningadd/baseinfo.png"/>
				基本资料</div>
			</div>
			<div class="base-info">
				<ul>
					<li>
						<div class="base-info-item-title">风险等级：</div>
						<div class="base-info-level">
						  <ul>
							<li @click="changeRiskLevel(1)" :class="consultLawyerData.riskLevel==1?'base-level-active':''">
								轻微(1级)
							</li>
							
							<li @click="changeRiskLevel(2)" :class="consultLawyerData.riskLevel==2?'base-level-active':''">
								关注(2级)
							</li>
							<li @click="changeRiskLevel(3)" :class="consultLawyerData.riskLevel==3?'base-level-active':''">
								警惕(3级)
							</li>
							<li @click="changeRiskLevel(4)" :class="consultLawyerData.riskLevel==4?'base-level-active':''">
								重大(4级)
							</li>
							<li @click="changeRiskLevel(5)" :class="consultLawyerData.riskLevel==5?'base-level-active':''">
								高危(5级)
							</li>
							<li @click="changeRiskLevel(6)" :class="consultLawyerData.riskLevel==6?'base-level-active':''">
								极危(6级)
							</li>
							
							
						  </ul>	
							
						</div>
					</li>
					<li>
						<div class="base-info-item-title">推送人：</div>
						<div class="base-info-item-desc">{{lawyerData.name}}</div>
					</li>
					<li>
						<div class="base-info-item-title">涉及人数：</div>
						<div class="base-info-item-desc">
							<input   type="text" v-model="riskWarningData.people" maxlength="3" />
						</div>
					</li>
					<li>
						<div class="base-info-item-title">发生时间：</div>
						<div class="base-info-item-desc">{{consultLawyerData.createTime}}</div>
					</li>
					<li>
						<div class="base-info-item-title">决策院校：</div>
						<div class="base-info-item-desc">{{schoolData.name}}</div>
					</li>
					</ul>
					  <div class="base-info-case">
							<div>案件经过：</div>
					  <textarea maxlength="200" v-model="consultLawyerData.description" rows="5"></textarea>
					</div>
			</div>
			<!--/基本资料-->
			
			<!--损失预判-->
			<div class="common">
			<div class="common-title">
				<img class="common-icon" src="@/assets/images/wechat/lawyer/riskwarningadd/prediction.png"/>
				损失预判</div>
			</div>
			<div class="loss-prediction">
				<textarea maxlength="200" v-model="riskWarningData.lossPrediction"  rows="5" ></textarea>
			</div>
			<!--/损失预判-->
			
			<!--风险焦点-->
			<div class="common">
			<div class="common-title">
				<img class="common-icon" src="@/assets/images/wechat/lawyer/riskwarningadd/focus.png"/>
				风险焦点（最多五条）
				<img @click="addRiskFocus()" class="common-icon-right" src="@/assets/images/wechat/lawyer/riskwarningadd/plus.png"/>
			</div>
			</div>
			<div class="risk-focus">
				<ul>
					
					<li v-for="(item,index) in riskWarningData.riskFocus" :key="index">
						<input type="text" v-model="riskWarningData.riskFocus[index]"  maxlength="20"/>
						<img  @click="removeRiskFocus(index)"  class="delete-item" src="@/assets/images/wechat/lawyer/riskwarningadd/delete.png"/>
					</li>
				</ul>
			</div>
			<!--/风险焦点-->
			
			<!--参考案例-->
			<div class="common">
			<div class="common-title">
				<img class="common-icon" src="@/assets/images/wechat/lawyer/riskwarningadd/reference.png"/>
				参考案例（最多三条）
				<img @click="addReferenceCases()"  class="common-icon-right" src="@/assets/images/wechat/lawyer/riskwarningadd/plus.png"/>
			</div>
			</div>
			<div class="reference-cases">
				<ul>
					
					<li v-for="(item,index) in riskWarningData.referenceCases" :key="index">
						<input type="text" v-model="item.title" placeholder="案例标题" maxlength="20" />
						<input type="text" v-model="item.href" placeholder="链接地址" maxlength="30" />
						<img @click="removeReferenceCases(index)" class="delete-item" src="@/assets/images/wechat/lawyer/riskwarningadd/delete.png"/>
					</li>
					
				</ul>
			</div>
			<!--/参考案例-->
			
			
			
			<!--决策建议-->
			<div class="common">
			<div class="common-title">
				<img class="common-icon" src="@/assets/images/wechat/lawyer/riskwarningadd/reference.png"/>
				决策建议（最多三条）
				<img @click="addPolicyDecision()" class="common-icon-right" src="@/assets/images/wechat/lawyer/riskwarningadd/plus.png"/>
			</div>
			</div>
			<div class="reference-cases">
				<ul>
					
					<li v-for="(item,index) in riskWarningData.policyDecision" :key="index">
						<input type="text" v-model="item.content" placeholder="您的建议" maxlength="100" />
						<input type="text" v-model="item.result"  placeholder="预计效果,如防控实效100%" maxlength="20" />
						<img @click="removePolicyDecision(index)"  class="delete-item" src="@/assets/images/wechat/lawyer/riskwarningadd/delete.png"/>
					</li>
					
				</ul>
			</div>
			<!--/决策建议-->
			<div class="btn-box">
			<input type="button" @click="ajaxInsertRiskWarning()" class="btn" value="提交并保存" />
			</div>
			
			
			
			
		</div>
		
	</div>
</template>

<script>
//引入组件
import Loading from '@/components/wechat/index/Loading.vue'
//引入js	
import router from '@/router/index'
import {formatDate} from '@/filters/formatdate'

import request from '@/utils/request'//记得比赛后删除

export default {
	components: {
		Loading
	},
    data(){
		return {
			isLoading:true,//监控页面是否加载完毕
			ajaxFlag:true,//监控ajax请求，避免多次请求
			ajaxData:{},//ajax提交的值
			
			consultLawyerData:{},
			lawyerData:{},
			schoolData:{},
			riskWarningData:{people:1,lossPrediction:"",riskFocus:[""],referenceCases:[{title:"",href:""}],policyDecision:[{content:"",result:""}]}
		}
    },
    created:function(){
		var that=this;
		var ajaxData={}
		ajaxData.id=that.$route.query.id
		lawyerFindConsultLawyer(ajaxData).then(function(res){
		   if(res.code==200){
			   that.consultLawyerData=res.consultLawyerData;
			   that.consultLawyerData.createTime=formatDate(that.consultLawyerData.createTime)
			   that.ajaxFindLawyer(that.consultLawyerData.lawyerId);
			   that.ajaxFindSchool(that.consultLawyerData.schoolCode);
		   }
		   that.isLoading=false;
		}).catch(function(error){
			that.isLoading=false;
			console.log(error);
		})
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
		ajaxFindLawyer:function(lawyerId){
			var that=this
			var ajaxData={};
			ajaxData.id=lawyerId;
			openFindLawyer(ajaxData).then(function(res){
			   if(res.code==200){
				   that.lawyerData=res.lawyerData;
			   }
			}).catch(function(error){
				console.log(error);
			})
		},
		ajaxFindSchool:function(schoolCode){
			var that=this
			var ajaxData={};
			ajaxData.code=schoolCode;
			findSchool(ajaxData).then(function(res){
			   if(res.code==200){
				   that.schoolData=res.schoolData;
			   }
			}).catch(function(error){
				console.log(error);
			})
		},
		changeRiskLevel:function(riskLevel){
			var that=this;
			that.consultLawyerData.riskLevel=riskLevel
		},
		addRiskFocus:function(){
			var that=this;
			if(that.riskWarningData.riskFocus.length==5)
			{
				alert("风险焦点不能超过5条");
				return 0;
			}
			that.riskWarningData.riskFocus.push("");
		},
		removeRiskFocus:function(index){
			var that=this;
			that.riskWarningData.riskFocus.splice(index,1)
		},
		addReferenceCases:function(){
			var that=this;
			if(that.riskWarningData.referenceCases.length==3)
			{
				alert("参考案例不能超过3条");
				return 0;
			}
			var obj={title:"",href:""};
			that.riskWarningData.referenceCases.push(obj);
		},
		removeReferenceCases:function(index){
			var that=this;
			that.riskWarningData.referenceCases.splice(index,1)
		},
		addPolicyDecision:function(){
			var that=this;
			if(that.riskWarningData.policyDecision.length==3)
			{
				alert("决策建议不能超过3条");
				return 0;
			}
			var obj={content:"",result:""};
			that.riskWarningData.policyDecision.push(obj);
		},
		removePolicyDecision:function(index){
			var that=this;
			that.riskWarningData.policyDecision.splice(index,1)
		},
		ajaxInsertRiskWarning:function(){
			var that=this;
			var token=localStorage.getItem('token');
			
			if(!that.ajaxFlag)
			{
				alert("请求过于频繁");
				return 0;
			}
			if(that.riskWarningData.people==0)
			{
				alert("涉及人数至少一人");
				return 0;
			}
			if(that.riskWarningData.lossPrediction.length==0)
			{
				alert("损失预判不能为空");
				return 0;
			}
			that.ajaxFlag=false;
			that.ajaxData={};
			that.ajaxData.schoolCode=that.consultLawyerData.schoolCode;
			that.ajaxData.lawyerName=that.lawyerData.name;
			that.ajaxData.riskLevel=that.consultLawyerData.riskLevel;
			that.ajaxData.people=that.riskWarningData.people;
			that.ajaxData.description=that.consultLawyerData.description;
			that.ajaxData.lossPrediction=that.riskWarningData.lossPrediction;
			that.ajaxData.riskFocus=JSON.stringify(that.riskWarningData.riskFocus);
			that.ajaxData.referenceCases=JSON.stringify(that.riskWarningData.referenceCases);
			that.ajaxData.policyDecision=JSON.stringify(that.riskWarningData.policyDecision);
			that.ajaxData.createTime=that.consultLawyerData.createTime;
			console.log(that.ajaxData)
			request({
				headers:{
					'Content-Type': 'application/json;charset=UTF-8',
					'Authorization':token
				},
				url: "/wechatLawyer/insertRiskWarning",
				method: "post",
				data: that.ajaxData
			}).then(function(res){
			  if(res.code=='200')
			  {
				  alert(res.content);
				  router.push({path:'/wechatlawyer/consultlist'});
			  }
			  else{
				  alert(res.content);
			  }
			  that.ajaxFlag=true;
			}).catch(function(error){
				console.log(error);
			})
			
			
		}
  	}
}
</script>

<style lang="scss" scoped>
.main{
     width:100%;
     overflow:hidden;
     position:relative;
}
.main>div{
	width: 100%;
	overflow: hidden;
}

.common{
	width:100%;
	background-color:#1B1464;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.common:first-child{
	margin-top: 0rem;
}

.common-title {
	width: 90%;
	margin: auto;
    line-height: 1.5rem;
    color: #FFFFFF;
    font-size: 1rem;
    padding-top: 1.25rem;
    padding-bottom:0.25rem;
    text-indent: 0.5rem;
}

.common-icon{
	width: 1rem;
	height: 1rem;
	float: left;
	margin-top:5px;	
}

.base-info{
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.base-info >ul{
  width: 90%;
  margin: auto; 	
}

.base-info>ul>li{
	width: 100%;
	border-bottom: 1px solid #94b2ff;
	display: flex;
	font-size: 0.875rem;
	overflow: hidden;
	flex-wrap:wrap;
}

.base-info-item-title{
	width: 30%;
	line-height: 2.5rem;
}
.base-info-item-desc{
	width: 70%;
	text-align: right;
	line-height: 2.5rem;
}

.base-info-level{
	width: 100%;
	color: #999;
	margin: auto;
}

.base-info-level>ul{
	display: flex;
	flex-wrap:wrap;
	overflow: hidden;
	margin-bottom:0.75rem ;
}
.base-info-level >ul >li{
	width: 20%;
	margin-left:4%;
	text-align: center;
	border:1px solid #999999 ;
	font-size: 0.75rem;
	line-height: 1.25rem;
	margin-top: 0.3rem;
}

.base-info-item-desc >input{
	width: 100%;
	height: 100%;
	border: none;
	background: none;
	text-align: right;
	font-size: 0.875rem;
	outline: none;
}

.base-level-active{
color: #ff0000 !important;
border: 1px solid #ff0000!important;	
}

.base-info-case{
	width: 90%;
	margin: auto;	
	text-align: center;
}

.base-info-case >div{
   font-size: 0.875rem;
   line-height: 2.5rem;
   text-align: left;
   
} 

textarea{
    background-color: #b4c9fa;
	border: 1px solid #a2bafa;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	line-height:1.25rem;
	outline: none;	
	overflow: hidden;
}

.base-info-case > textarea{
	width: 95%;
}

.loss-prediction,.risk-focus,.reference-cases{
	width: 90%;
	margin: auto;
}

.loss-prediction >textarea{
	width: 100%;
}

.common-icon-right{
	float: right;
	width: 1rem;
	height: 1rem;
	margin-top: 5px;
	margin-right: 0rem;
}
.risk-focus >ul >li{
	width: 100%;
	margin-top: 0.625rem;
} 

.risk-focus >ul >li  >input,
.reference-cases >ul >li >input {
	width: 90%;
	background-color: #b4c9fa;
	border: 1px solid #a2bafa;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	line-height:2.5rem;
	outline: none;	
	
}

.delete-item{
	float: right;
	width: 1rem;
	height: 1rem;
	margin-right: 0rem;
	margin-top:13px;
}

.reference-cases >ul >li{
	width: 100%;
	margin-top: 0.625rem;
}

.reference-cases >ul >li input:nth-child(2)
{
	margin-top:0.25rem;
}

.reference-cases .delete-item{
	margin-top:-0.5rem;
}

.btn-box{
	width: 100%;
	margin-top: 1rem;
	background-color: #91afff;
	padding-top: 2rem;
}

.btn{
	outline: none;
	width: 100%;
	background-color: #0054bc;
	color: #FFFFFF;
	font-size: 1.125rem;
	line-height:3rem;
	border: none;
}
</style>
